<template>
    <div>
      <div class="main-tab">
        <x-header id="header" :left-options="{backText: ''}" class="top"><span class="tit">我的发表</span></x-header>
        <div class="main-headerAndTab">
          <div>
            <div class="info">
              <img src="../../../static/img/my-off.png" class="round">
              <div class="personal">
                <span class="name">王小二</span>
                <span class="level"><img src="../../../static/icon/my-icon/855105-copy.png" alt=""><span class="LV">LV.1</span></span>
              </div>
            </div>
            <div class="tab">
              <tab bar-active-color="#AD2532" :line-width="2" custom-bar-width="1.43rem" active-color="#AD2532" default-color="#9B9B9B">
                <tab-item selected  active-class="active-1" @click.native="handle1">评论</tab-item>
                <tab-item  active-class="active-1" @click.native="handle2">主帖</tab-item>
              </tab>
            </div>
          </div>
        </div>
        <div class="content-one" v-show="flag1">
          <ul>
            <li v-for="(item,index) in commentlist" :key="item.id">
              <div class="test">
                <div class="personal2">
                  <img :src="item.user_img" >
                  <div class="testnews">
                    <span class="title">{{item.name}}</span>
                    <span class="date">{{item.date}}<span class="hour">{{item.hour}}</span></span>
                  </div>
                </div>
              </div>
              <div class="comment-intro">{{item.comment_intro}}</div>
              <div class="comment-infor">
                <img :src="item.comment_pic" class="comment-infor-pic">
                <div class="comment-infor-title">{{item.comment_title}}</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="content-two" v-show="flag2">
          <group>
            <cell-box class="post" v-for="(item,index) in postlist" :key="item.id">
              <img :src="item.post_pic">
              <div class="post-info">
                <span class="post-title">{{item.post_title}}</span>
                <span class="post-date">{{item.date}}<span class="post-hour">{{item.hour}}</span></span>
              </div>
            </cell-box>
          </group>
        </div>
        <div class="more">没有更多了哦～</div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "myPublish",
      data(){
          return{
            flag1:true,
            flag2:false,
            commentlist:[
              {
                id:0,
                name:'王小二',
                date:'2019-01-01',
                user_img:'../../../static/img/my-off.png',
                hour:'09:00',
                comment_intro:'真的这么厉害吗',
                comment_pic:'../../../static/icon/smoke.jpg',
                comment_title:'七星软黑日式完税版外包装欣赏及口感测评'
              },
              {
                id:1,
                name:'王小二',
                date:'2019-01-01',
                user_img:'../../../static/img/my-off.png',
                hour:'09:00',
                comment_intro:'真的这么厉害吗',
                comment_pic:'../../../static/icon/smoke.jpg',
                comment_title:'七星软黑日式完税版外包装欣赏及口感测评'
              },
              {
                id:2,
                name:'王小二',
                date:'2019-01-01',
                user_img:'../../../static/img/my-off.png',
                hour:'09:00',
                comment_intro:'真的这么厉害吗',
                comment_pic:'../../../static/icon/smoke.jpg',
                comment_title:'七星软黑日式完税版外包装欣赏及口感测评'
              },
            ],
            postlist:[
              {
                id:0,
                date:'2019-01-01',
                hour:'09:00',
                post_pic:'../../../static/icon/smoke.jpg',
                post_title:'七星软黑日式完税版外包装欣赏及口感测评'
              }
            ]
          }

      },
      methods:{
        handle1(){
          this.flag1=true;
          this.flag2=false;
        },
        handle2(){
          this.flag1=false;
          this.flag2=true;
        }
      }
    }
</script>

<style scoped>
  .top{
    background: #AD2532;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
  }
  .tit{
    margin-top: 8px;
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #FFFFFF;
    letter-spacing: -0.41px;
    text-align: center;
  }
  .info{
    background: #FFFFFF;
    border-bottom: #F4F4F4 solid 1px;
    display: flex;
    align-items: center;
    height: 7.21rem;
  }
  .main-headerAndTab{
    padding-bottom: 0.8rem;
  }
  .round{
    width: 5rem;
    height: 5rem;
    border-radius:50%; overflow:hidden;
    align-items: center;
    justify-content: center;
    border: 1px solid #F4F4F4;
    margin-left: 1.07rem;
  }
  .personal{
    display: flex;
    flex-direction: column;
    margin-left: 0.72rem;
  }
  .name{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #4A4A4A;
    letter-spacing: -0.41px;
  }
  .level{
    width: 5rem;
    height: 1.79rem;
    border: 1px solid #AD2532;
    border-radius: 0.89rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.79rem;
  }
  .level img{
    width: 1rem;
  }
  .LV{
    font-size: 12px;
    color: #AD2532;
    margin-left: 0.4rem;
  }
  .active-1{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 18px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: center;
  }
  .tab{
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02), 0 2px 4px 0 rgba(173,37,50,0.05);
  }
  .content-one{
    width: 100%;
    background: #FFFFFF;
  }
  .content-one ul li{
    width: 100%;
    height: 14.71rem;
    overflow: hidden;
  }
  .content-one .test{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 1.07rem;
    margin-top: 2rem;
  }
  .content-one .personal2{
    display: flex;
    flex-direction: row;
  }
  .content-one .test img{
    width: 2.86rem;
    height: 2.86rem;
    border-radius:50%; overflow:hidden;
    align-items: center;
    justify-content: center;
    border: 1px solid #F4F4F4;
  }
  .testnews{
    display: flex;
    flex-direction: column;
    margin-left: 0.71rem;
  }
  .date{
    margin-top: 0.35rem;
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .hour{
    margin-left: 0.36rem;
  }
  .title{
    font-family: "PingFangSC-Semibold",serif;
    display: block;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
  }
  .comment-intro{
    margin-left: 4.64rem;
    margin-top: 1.08rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
  }
  .comment-infor{
    width: 21.07rem;
    height: 5.79rem;
    margin-left: 4.64rem;
    margin-top: 0.71rem;
    background: #F5F5F5;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
  }
  .comment-infor-pic{
    width: 4.29rem;
    height: 4.29rem;
    margin-left: 0.72rem;
    margin-top: 0.79rem;
  }
  .comment-infor-title{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    margin-top: 0.69rem;
    margin-left: 0.71rem;
  }
  .content-one li {
    border-bottom: 1px solid #F5F5F5;
  }
  .more{
    position: absolute;
    left: 50%;
    margin-left: -3.43rem;
    margin-top: 1.07rem;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .post img{
    width: 4.29rem;
    height: 4.29rem;
  }
  .post-info{
    display: flex;
    flex-direction: column;
    margin-left: 0.71rem;
  }
  .post-title{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
  }
  .post-date{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
    margin-top: 0.71rem;
  }
  .post-hour{
    margin-left: 0.36rem;
  }
</style>
